<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="cancel" style="min-width: 700px;">
    <el-transfer v-model="selectList" filterable :left-default-checked="selectList" :right-default-checked="rightList"
      :props="{
    key: 'teacherNumber',
    label: 'name',
  }" :titles="['全体人员', '管理员']" :button-texts="['移除', '添加']" ref="transfer" :data="list"
      @right-check-change="rightHandle" @left-check-change="handleLeftCheckChange" @change="changeHamdle">
    </el-transfer>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()" :disabled="!btnFlag">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref } from "vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture } from "@element-plus/icons-vue";
export default {
  name: "BaseTeacherList",
  data() {
    return {
      type: 0,
      dialogFormVisible: ref(false),
      title: "",
      page: 0,
      departmentId: 0,
      pageSize: 10,
      total: 0,
      limit: 10,
      list: [],
      listCopy: [],
      selectList: [],
      rightList: [],
      addPath: '/javaApi/baseTeacherDepartment/add',
      form: {
        name: "",
        teacherNumber: "",
      },
      btnFlag: false,
      repairTypeId: '',
      userType: '',
      ids: [],
    };
  },
  components: {},
  setup() {
    return {
      locale: zhCn,
    };
  },
  mounted() {

  },
  watch: {
    $route() { },
  },
  methods: {
    cancel() {
      this.dialogFormVisible = false;
      this.selectList = [];
      this.rightList = [];
      this.list = [];
      this.btnFlag = false

      this.$nextTick(() => {
        this.$refs.transfer.clearQuery('left')
        this.$refs.transfer.clearQuery('right')
      })
    },
    filteredList() {
      let data = this.listCopy.filter(item => this.rightList.includes(item.teacherNumber));
      // console.log(222, data);
      if (data && data.length > 0) {
        this.ids = JSON.parse(JSON.stringify(data)).map(item => item = item.id).join(',')
        // console.log(333, this.ids);
        data = data.map(item => item = { userName: item.name, userNumber: item.teacherNumber })
        return {
          data: data,
          ids: this.ids
        }
        // return data
      } else {
        return []
      }
    },
    save() {
      let res = this.filteredList()
      let teacherList = []
      let ids = ""
      if (res) {
        teacherList = res.data
        ids = res.ids
      }
      // console.log(857, teacherList, ids);
      // if (this.userType == 1) {
      //   this.editRoleHandle(ids)
      // }

      if (teacherList.length == 0) {
        ElMessage.error("请至少选择一名人员后保存");
        return;
      }
      let params = new FormData()
      params.append("users", JSON.stringify(teacherList))
      params.append("userType", this.userType)
      params.append("repairTypeId", this.repairTypeId)
      httpService(
        "/javaApi/repairTypeUser/addBatch", params, "post"
      ).then((data) => {
        if (data.code == 200) {
          ElMessage.success("保存成功");
          //刷新父亲组件
          this.cancel();
          this.$emit('onSubmit');
        }
      });
    },

    // editRoleHandle(ids) {
    //   httpService(
    //     "/javaApi/baseRole/addRoleUsers",
    //     {
    //       rId: 152,
    //       uIds: ids,
    //     },
    //     "get"
    //   ).then((data) => {
    //     if (data.code != 200) {
    //       ElMessage.success("角色人员保存失败");
    //     }
    //   });
    // },

    handleLeftCheckChange(checkedKeys, checkedItems) {
      // 更新右侧选中的完整数据对象 
      this.rightSelectedItems = checkedItems;
    },

    filterMethod(query, item) {
      return item.initial.toLowerCase().includes(query.toLowerCase());
    },

    rightHandle(value) {
      this.rightList = value
    },

    changeHamdle(value, direction, movedKeys) {
      this.rightList = value
    },

    listByDepartmentId() {
      httpService("/javaApi/baseTeacher/list/1/10000", {}, "get").then(
        (data) => {
          // data = JSON.parse(JSON.stringify(data))
          this.listCopy = JSON.parse(JSON.stringify(data.list))

          for (let k = 0; k < data.list.length; k++) {
            data.list[k].name =
              data.list[k].name + "-" + data.list[k].teacherNumber;
          }
          this.list = data.list;
          httpService(
            // "/javaApi/repairInfo/v2/queryAllManager", {}, "get"
            "/javaApi/repairTypeUser/list/1/1000", { userType: this.userType, repairTypeId: this.repairTypeId }, "get"
          ).then((data) => {
            const da = data.list
            this.btnFlag = true
            let selList = [];
            for (let i = 0; i < da.length; i++) {
              if (this.userType == da[i].userType) {
                selList.push(da[i].userNumber);
              }
            }
            console.log(22, da, selList);
            this.rightList = selList;
            this.selectList = selList;
          });
        }
      );
    },

  },
};
</script>
<style scoped>
.el-main {
  padding: 0px;
  text-align: left;
}

.teacher-content {
  width: 100%;
}

.app-table {
  background: #eff3f5;
  padding: 10px;
}

.app-separator {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.app-body {
  background: white;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
  min-height: calc(100vh - 204px);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}

.el-transfer {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
</style>
